<template>
	<view class="image-module">
		<view class="title-content">
			<view class="tab-content">
				<view @click="init(0)" :class="[typeIndex === 0 ? 'active' : '']" class="tab-item">班前交底</view>
				<view @click="init(1)" :class="[typeIndex === 1 ? 'active' : '']" class="tab-item">质量管控</view>
			</view>
			<view v-if="typeIndex === 0"  class="select-date">
				<!-- @click="calendarVisible = true" -->
				<!-- <text :class="[!currentDateValue ? 'gray-label' : '']">{{ currentDateValue ? currentDateValue : '请选择日期' }}</text>
				<image src="../../../../../subpackage-overhaul/static/icon-style-4.png"></image> -->
			</view>
		</view>
		
		<view class="swiper">
			<u-swiper :current="swiperIndex" :list="imageList" @click="previewImage" @change="changeSwiper" imgMode="aspectFit" height="208" bgColor="#494f5a"></u-swiper>
			<view class="indicator">
				<view @click="swiperIndex = index" v-for="(item, index) in imageList" :key="index" :class="[swiperIndex === index ? 'active' : '']"></view>
			</view>
		</view>
		
		<u-datetime-picker v-if="currentDateValueTime || calendarVisible" v-model="currentDateValueTime"  @cancel="calendarVisible = false" @confirm="confirmCalendar" :show="calendarVisible" mode="date" :maxDate="dateModel.end"></u-datetime-picker>
	</view>
</template>

<script>
	import { handleFormatDate } from "@/utils/date.js"
	import CONFIG from "@/config/path.js";
	import { dailyBriefingDateList, dailyDisclosurePictures, getIiqclqcfqcoqc } from "@/api/comprehensive/comprehensive.js"
	
	export default {
		inject: ['getId'],
		data() {
			return {
				// 当前选择的类型
				typeIndex: 0,
				// 日期弹框是否可见
				calendarVisible: false,
				// 当前日期的值
				currentDateValue: null,
				// 当前日期的值
				currentDateValueTime: null,
				// 日期数据
				dateModel: {
					end: 0,
					monthNum: 60
				},
				// 图片列表
				imageList: [],
				// 当前轮播的下标
				swiperIndex: 0
			}
		},
		mounted() {
			const year = new Date().getFullYear()
			this.dateModel.end = new Date(`${year + 2}-01-01`).getTime()
		},
		methods: {
			/** 初始化 */
			async init(index = undefined) {
				if (index !== undefined) {
					if (this.typeIndex === Number(index)) {
						return
					}
					this.typeIndex = Number(index)
				}
				this.currentDateValue = ''
				this.imageList = []
				// 每日交底
				if (this.typeIndex === 0) {
					// await this.getDailyDisclosureDate()
					this.getDailyDisclosureList()
				}
				// 质量管控
				else if (this.typeIndex === 1) {
					this.getQualityControlList()
				}
			},
			
			/** 获取每日交底日期数据 */
			getDailyDisclosureDate() {
				return new Promise(resolve => {
					this.currentDateValue = null
					if (!this.getId()) {
						return
					}
					dailyBriefingDateList({ id: this.getId() }).then(res => {
						const dateArray = []
						const tempArray = res.result.map(item => handleFormatDate(new Date(item.recordCreateDate)))
						for (const item of tempArray) {
							if (!dateArray.includes(item)) {
								dateArray.push(item)
							}
						}
						this.dateArray = dateArray
						if (res.result.length) {
							const tempDate = Math.max(...res.result.map(item => item.recordCreateDate)) || null
							if (tempDate) {
								this.currentDateValue = handleFormatDate(new Date(tempDate))
								this.currentDateValueTime = tempDate
							}
						}
					}).finally(() => {
						resolve()
					})
				})
			},
			
			/** 获取每日交底列表数据 */
			getDailyDisclosureList() {
				this.imageList = []
				if (!this.getId()) {
					return
				}
				dailyDisclosurePictures({
					id: this.getId(),
					// startTime: new Date(`${this.currentDateValue} 00:00:00`).getTime(),
					// endTime: new Date(`${this.currentDateValue} 23:59:59`).getTime()
				}).then(res => {
					this.imageList = res.result.map(item => CONFIG.IMG_FILE_URL + item)
					console.debug(this.imageList, '图片列表')
				})
			},
			
			/** 获取质量管控图片列表 */
			getQualityControlList() {
				this.imageList = []
				if (!this.getId()) {
					return
				}
				getIiqclqcfqcoqc({ id: this.getId() }).then(res => {
					this.imageList = res.result.map(item => CONFIG.IMG_FILE_URL + item.fileName)
				})
			},
			
			/** 改变轮播下标 */
			changeSwiper(event) {
				const { current } = event
				this.swiperIndex = current
			},
			
			/** 预览图片 */
			previewImage(index) {
				uni.previewImage({ current: index, urls: this.imageList })
			},
			
			/** 日期筛选完成 */
			confirmCalendar(event) {
				const { value } = event
				this.currentDateValue = value ? handleFormatDate(new Date(value)) : undefined
				this.calendarVisible = false
				this.getDailyDisclosureList()
			}
		}
	}
</script>

<style scoped lang="scss">
	.image-module {
		background: #fff;
		.title-content {
			padding: 24px 20px 20px 12px;
			height: 32px;
			line-height: 32px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.tab-content {
				background: #F4F6F8;
				border-radius: 4px;
				font-size: 16px;
				font-weight: bold;
				color: #9d9eb6;
				display: flex;
				align-items: center;
				border: 1px solid #EDEDED;
				width: 162px;
				text-align: center;
				.tab-item {
					flex: 1;
					&.active {
						color: #2f80ed;
						background: #fff;
					}
				}
			}
			.select-date {
				height: 32px;
				width: 132px;
				// background: #f5f7fa;
				// border-radius: 4px;
				// padding: 6px 12px;
				// box-sizing: border-box;
				// color: #425166;
				// font-weight: bold;
				// font-size: 14px;
				// display: flex;
				// align-items: center;
				// justify-content: space-between;
				.gray-label {
					color: #cacaca;
					font-weight: 500;
				}
				image {
					width: 16px;
					height: 16px;
				}
			}
		}
		.swiper {
			width: 100%;
			padding: 0 16px;
			box-sizing: border-box;
			.indicator {
				margin-top: 18px;
				padding-bottom: 19px;
				display: flex;
				align-items: center;
				justify-content: center;
				height: 10px;
				view {
					margin-right: 5px;
					background: #dde3eb;
					border-radius: 50%;
					width: 10px;
					height: 10px;
				}
				.active {
					background: #3891fe;
					width: 25px;
					border-radius: 9px;
				}
			}
		}
	}
</style>
